<template>
	<div class="container">
		<el-form
		style="margin-top:20px;"
		    :model="ruleForm"
		    ref="ruleForm"
		    :rules="rules"
		    :label-position="labelPosition"
		    label-width="120px"
		    class="demo-ruleForm ">
			<el-row >
				<el-page-header @back="goback" content="检疫">
				</el-page-header>
				<el-col style="margin-top:20px;">
					<el-form-item label="养殖批号：" prop="spec">
					    <el-input placeholder="请输入" disabled v-model="ruleForm.batch" style="width: 300px">
					      
					    </el-input>
					</el-form-item>
				</el-col>
			    <el-col :span="12" >
			        <el-form-item label="检疫机构：" prop="type">
						 <el-input placeholder="请输入" v-model="quarantine.mechanism" style="width: 300px"> </el-input>
			        </el-form-item>
					<el-form-item label="检测依据：" prop="type">
					    <template>
					        <el-select
					            v-model="quarantine.basis"
					            style="width:300px"
					            placeholder="请选择">
					            <el-option
					                v-for="item in typeList"
					                :key="item.id"
					                :label="item.checkName"
					                :value="item.checkName"
					            ></el-option>
					        </el-select>
					    </template>
					</el-form-item>
					<el-form-item label="检疫批号：" prop="spec">
					    <el-input placeholder="请输入" v-model="quarantine.batch" style="width: 300px">
					        <template slot="append">
					           <el-button @click="addBatch">自动生成</el-button>
					        </template>
					    </el-input>
					</el-form-item>
                    <el-form-item label="检疫结果：" prop="spec">
                    <el-radio-group v-model="result" @change="changeMaterType">
                        <el-radio label="合格" border>合格</el-radio>
                        <el-radio label="不合格" border>不合格</el-radio>
                    </el-radio-group>
                    </el-form-item>
					<el-form-item label="检测报告：" style="width:500px">
						<el-upload
							class="upload-poster"
							action="https://jsonplaceholder.typicode.com/posts/"
							:show-file-list="false"
							:on-change="imgPreview"
							:auto-upload="false">
							<img v-if="reportImg" :src="reportImg" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>jpg、png、gif格式，60x60像素，不超过2MB
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="检疫负责人：" prop="type">
					    <template>
					        <el-select
					            v-model="quarantine.name"
					            style="width:300px"
					            placeholder="请选择">
					            <el-option
					                v-for="item in userList"
					                :key="item.id"
					                :label="item.name"
					                :value="item.name"
					            ></el-option>
					        </el-select>
					    </template>
					</el-form-item>
					<el-form-item label="检疫日期：">
					    <el-date-picker
					        v-model="quarantine.time"
					        type="date"
					        value-format="yyyy-MM-dd"
					        placeholder="请选择"
					        style="width:300px"
					    ></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button type="primary" @click="submitrule('quarantine')">提交</el-button>
			    <el-button @click="goback">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
    import { check_findByAll,user_findByAll } from '@/request/api';
    import { quarantine_findById,quarantine_save } from '@/request/breedApi';
	import uploadFile from '../../../common/uploadfile';
	export default{
		components: {
		    uploadFile
		},
		data(){
			return{
				labelPosition:'right',
				ruleForm:{},
				quarantine:{
				   batch:''
                  },
				reportImg:'',
				userList:[],
				typeList:[],
				listUrl:'',
				result:'合格'
			}
		},
		mounted() {
			this.init();
		},
		methods:{
				// 页面一进来加载
                init() {
                        const _this = this;
                         this.id = _this.$route.query.id
                         quarantine_findById(this.id).then((res) => {
                          if (res.code == 200) {
                                  this.ruleForm = res.data;
                              }
                             });
						 check_findByAll("").then((res) => {
						   if (res.code == 200) {
								   this.typeList = res.data;
							   }
						  });
						  user_findByAll("").then((res) => {
							if (res.code == 200) {
									this.userList = res.data;
								}
							   });
							},
                addBatch() {
                    var d = new Date();
                    var curr_date = d.getDate();
                    var curr_month = d.getMonth() + 1;
                    var curr_year = d.getFullYear();
                    String(curr_month).length < 2 ? (curr_month = "0" + curr_month): curr_month;
                    String(curr_date).length < 2 ? (curr_date = "0" + curr_date): curr_date;
                    var yyyyMMdd = curr_year + "" + curr_month +""+ curr_date;
                    this.quarantine.batch = yyyyMMdd + Math.ceil(Math.random()*10000);
                },
			goback(){
				this.$router.go(-1)
			},

			// 选择图片
			imgPreview(file,fileList){
				 this.reportImg =  URL.createObjectURL(file.raw);
				 let fileName = file.name;
				let regex = /(.jpg|.gif|.png)$/;
				 if (regex.test(fileName.toLowerCase())) {
					this.quarantine.files = file.raw
					this.quarantine.reportImg = file.name
				} else {
					 this.$message.error('请选择图片文件');
				 }
			},
			// 提交
			submitrule(){
				this.$confirm('请仔细核对所填信息，提交后不能修改！', '提示', {
				    confirmButtonText: '确定',
				    cancelButtonText: '取消',
				    type: 'warning'
				}).then(() => {
				    this.quarantine.breedId=this.ruleForm.id;
				    this.quarantine.breedBatch=this.ruleForm.batch;
				    this.quarantine.result=this.result;
				    let formdata = new FormData()
				    for (var a in this.quarantine) {
				        if (this.quarantine[a] == null || this.quarantine[a] == 'null') {
				            this.quarantine[a] = '';
				            formdata.append(a, '');
				        } else {
				            formdata.append(a, this.quarantine[a]);
				        }
				    }
				   quarantine_save(formdata).then((res) => {
					  if (res.code == 200) {

						   }
					  });
				})
			}
		}
	}
</script>

<style scoped>
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    width:180px;
	    overflow: hidden;
	  }
	  
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .el-upload--text{
	      width:180px;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>
